<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能卫生间</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="js/stats.js"></script>
    <script src="js/toast.js"></script>
    <script src="js/simulation.js"></script>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            padding: 0;
            background: #f5f5f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* 页面标题 */
        .page-header {
            padding: 15px;
            background: white;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
        }

        .page-header h1 {
            margin: 0;
            font-size: 18px;
            margin-right: auto;  /* 将标题推到左侧 */
        }

        /* 列表样式 */
        .toilet-list {
            padding: 0 0 60px 0;
            background: #f5f5f5;
        }

        .toilet-item {
            background: white;
            padding: 15px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            cursor: pointer;
            position: relative;  /* 为绝对定位的标签提供参考 */
            transition: background-color 0.3s ease;
        }

        .toilet-item[data-temporary="true"] {
            background: #fff8e1;
            border-left: 4px solid #ff9800;
        }

        .toilet-info {
            flex: 1;
        }

        .toilet-info h3 {
            font-size: 16px;
            margin: 0 0 8px 0;
            color: #333;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .toilet-info p {
            font-size: 13px;
            color: #666;
            margin: 4px 0;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .toilet-info .distance {
            color: #999;
            font-size: 12px;
        }

        /* 评分样式 */
        .rating {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: #ffa000;
            margin-left: 8px;
        }

        .rating i {
            font-size: 14px;
        }

        .rating-count {
            color: #999;
            font-size: 12px;
        }

        /* 状态统计样式 */
        .stall-stats {
            display: flex;
            gap: 15px;
            margin-top: 8px;
        }

        .stall-stats span {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #666;
            background: #f5f5f5;
            padding: 3px 8px;
            border-radius: 12px;
        }

        .male-stats i {
            color: #1976d2;
            font-size: 14px;
        }

        .female-stats i {
            color: #d81b60;
            font-size: 14px;
        }

        /* 状态标签样式 */
        .toilet-status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .toilet-status.normal {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .toilet-status.warning {
            background: #fff3e0;
            color: #ef6c00;
        }

        /* 底部导航栏 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            padding: 8px 0;
            border-top: 1px solid #eee;
        }

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
            cursor: pointer;
        }

        .tab-item.active {
            color: #007bff;
        }

        .tab-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }

        /* 页面容器样式 */
        #homePage, #settingsPage, #statsPage {
            min-height: calc(100vh - 60px);
            padding-bottom: 60px;
            background: #f5f5f5;
        }

        /* 重要：修改显示控制 */
        .page-container {
            display: none;
        }

        .page-container.active {
            display: block;
        }

        /* 设置页面样式 */
        .settings-list {
            margin: 15px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }

        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .settings-item:last-child {
            border-bottom: none;
        }

        .settings-item span {
            color: #333;
            font-size: 15px;
        }

        .settings-item i {
            color: #999;
            font-size: 14px;
        }

        .settings-item:active {
            background: #f5f5f5;
        }

        /* Toast 样式 */
        .toast {
            position: fixed;
            left: 50%;
            bottom: 100px;  /* 位于评分按钮上方 */
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;  /* 防止toast影响其他元素的点击 */
        }

        .toast.show {
            opacity: 1;
        }

        /* 成功和错误状态 */
        .toast.success {
            background: rgba(76, 175, 80, 0.9);
        }

        .toast.error {
            background: rgba(244, 67, 54, 0.9);
        }

        /* 统计页面样式 */
        .stats-container {
            padding: 15px;
            padding-bottom: 75px; /* 确保内容不被底部导航栏遮挡 */
        }

        .filter-bar {
            margin-bottom: 15px;
        }

        .filter-buttons {
            display: flex;
            gap: 10px;
            background: white;
            padding: 5px;
            border-radius: 8px;
        }

        .filter-btn {
            flex: 1;
            padding: 8px 0;
            border: none;
            border-radius: 6px;
            background: none;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-btn.active {
            background: #007bff;
            color: white;
        }

        .filter-btn:not(.active):hover {
            background: #f5f5f5;
        }

        .toilet-stats-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .toilet-stats-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .toilet-stats-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .toilet-stats-total {
            font-size: 14px;
            color: #666;
        }

        .gender-stats {
            display: flex;
            gap: 15px;
            margin: 10px 0;
        }

        .gender-stats-item {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px;
            border-radius: 4px;
            background: #f5f5f5;
        }

        .gender-stats-item.male {
            color: #1976d2;
        }

        .gender-stats-item.female {
            color: #d81b60;
        }

        .stall-stats-list {
            margin-top: 10px;
            display: grid;
            gap: 8px;
        }

        .stall-stats-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 13px;
        }

        /* 异常状态统计样式 */
        .abnormal-stats {
            margin: 10px 0;
            padding: 10px;
            background: #fff3e0;
            border-radius: 4px;
        }
        
        .abnormal-header {
            font-size: 13px;
            color: #f57c00;
            margin-bottom: 8px;
        }
        
        .abnormal-items {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .abnormal-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .abnormal-item.fault {
            background: #ffebee;
            color: #d32f2f;
        }
        
        .abnormal-item.maintenance {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .abnormal-item.smoke {
            background: #fafafa;
            color: #616161;
        }

        /* 预约记录页面样式 */
        .reservation-list {
            padding: 15px;
        }

        .reservation-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .reservation-item .toilet-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .reservation-item .stall-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .reservation-item .stall-number {
            color: #666;
            font-size: 14px;
        }

        .reservation-item .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .status-badge.active {
            background: #e3f2fd;
            color: #2196F3;
        }

        .status-badge.expired {
            background: #ffebee;
            color: #f44336;
        }

        .reservation-item .time {
            color: #999;
            font-size: 12px;
        }

        .reservation-item .cancel-btn {
            background: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
            cursor: pointer;
            float: right;
            margin-top: -4px;
        }

        .reservation-item .cancel-btn:hover {
            background: #d32f2f;
        }

        .no-data {
            text-align: center;
            color: #999;
            padding: 20px;
        }

        /* 预约记录页面头部样式 */
        #reservationsPage .page-header {
            display: flex;
            align-items: center;
            padding: 15px;
            position: relative;
        }

        #reservationsPage .page-header h1 {
            flex: 1;
            text-align: center;
            margin: 0;
            font-size: 18px;
        }

        #reservationsPage .back-btn {
            position: absolute;
            left: 15px;
            font-size: 18px;
            color: #333;
            cursor: pointer;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
        }

        #reservationsPage .back-btn:active {
            opacity: 0.7;
        }

        /* 用户信息区域样式 */
        .user-profile {
            background: white;
            padding: 20px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-profile .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-profile .avatar i {
            font-size: 40px;
            color: #bdbdbd;
        }

        .user-profile .user-name {
            font-size: 18px;
            color: #333;
            font-weight: 500;
        }

        .user-info {
            flex: 1;
        }

        .user-points {
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }

        .user-points i {
            color: #ffc107;
            margin-right: 5px;
        }

        /* 模拟按钮包装器 */
        .simulate-btn-wrapper {
            display: flex;
            gap: 10px;
        }

        /* 模拟按钮样式 */
        .simulate-btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            height: 36px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        .simulate-btn:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .simulate-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .simulate-btn i {
            font-size: 16px;
        }

        /* 模拟进度条样式 */
        .simulation-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: #f5f5f5;
            display: none;
        }

        .simulation-progress .bar {
            height: 100%;
            width: 0;
            background: #2196F3;
            transition: width 0.3s linear;
        }

        /* 统计数据样式 */
        .stats-item {
            background: white;
            margin: 10px;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .toilet-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 10px;
        }

        .stats-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .gender-stats {
            display: flex;
            gap: 15px;
        }

        .male-stats, .female-stats {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .male-stats i {
            color: #2196F3;
        }

        .female-stats i {
            color: #E91E63;
        }

        .total-stats {
            color: #666;
            font-size: 14px;
        }

        .no-data {
            text-align: center;
            color: #999;
            padding: 20px;
        }

        /* 模拟结果样式 */
        .simulation-results {
            background: white;
            margin: 10px;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .results-header h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
        }

        .close-btn {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            padding: 5px;
        }

        .results-content {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .result-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px;
            border-radius: 6px;
            background: #f5f5f5;
        }

        .result-item i {
            font-size: 24px;
        }

        .result-item.male i {
            color: #2196F3;
        }

        .result-item.female i {
            color: #E91E63;
        }

        .result-details {
            flex: 1;
        }

        .result-details .label {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
        }

        .result-details .value {
            font-size: 16px;
            color: #333;
            font-weight: 500;
        }

        /* 模拟结果分类标题 */
        .results-content h4 {
            margin: 15px 0 10px;
            font-size: 14px;
            color: #666;
        }

        /* 厕所统计项样式 */
        .toilet-stat-item {
            background: white;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
        }

        .toilet-stat-item .toilet-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .toilet-stat-item .stats-row {
            display: flex;
            gap: 15px;
        }

        /* 优化建议样式 */
        .optimization-suggestions {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .suggestion-item {
            background: #f8f9fa;
            border-left: 4px solid #2196F3;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 0 4px 4px 0;
        }

        .suggestion-item .toilet-name {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .suggestion-item .suggestion-content {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        .peak-hour-suggestion {
            margin-top: 8px;
            padding: 8px;
            background: #fff3e0;
            border-radius: 4px;
            color: #e65100;
        }

        .immediate-suggestion {
            margin-bottom: 12px;
            padding: 8px;
            background: #e3f2fd;
            border-radius: 4px;
            color: #1565c0;
        }

        .long-term-suggestion {
            margin-top: 12px;
            padding: 8px;
            background: #e8f5e9;
            border-radius: 4px;
            color: #2e7d32;
        }

        .alternative-suggestion {
            margin-top: 12px;
            padding: 8px;
            background: #f3e5f5;
            border-radius: 4px;
            color: #6a1b9a;
        }

        .alternative-suggestion strong {
            color: #4a148c;
        }

        .suggestion-content strong {
            display: block;
            margin-bottom: 4px;
        }

        .simulation-config {
            background: #fff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
        }

        .simulation-config h4 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 0 15px 0;
            color: #333;
        }

        .edit-config-btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .config-section {
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }

        .config-section h5 {
            margin: 0 0 10px 0;
            color: #666;
            font-size: 14px;
        }

        .config-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            gap: 10px;
        }

        .config-item label {
            width: 120px;
            color: #666;
            font-size: 13px;
        }

        .config-item input {
            width: 80px;
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: right;
        }

        .config-item input:disabled {
            background: #f5f5f5;
            color: #666;
        }

        .unit {
            color: #999;
            font-size: 12px;
        }

        .config-actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .save-config-btn {
            background: #4caf50;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        .cancel-config-btn {
            background: #f44336;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        .peak-hours {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .peak-hour-item {
            background: white;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            display: grid;
            grid-template-columns: 1fr auto auto;
            align-items: center;
            gap: 8px;
        }

        .peak-hour-item label {
            color: #666;
            font-size: 13px;
        }

        .peak-hour-item input {
            width: 70px;
            height: 28px;
            padding: 0 8px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            text-align: right;
            font-size: 13px;
        }

        .peak-hour-item .unit {
            font-size: 12px;
            color: #999;
            width: 30px;
        }

        /* 添加厕所按钮样式 */
        .add-toilet-btn {
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 6px 12px;
            margin: 8px 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .add-toilet-btn:hover {
            background: #45a049;
            transform: translateY(-1px);
        }

        .add-toilet-btn:active {
            transform: translateY(0);
        }

        .add-toilet-btn:disabled {
            background: #999 !important;
            cursor: not-allowed !important;
            transform: none !important;
        }

        /* 新增厕所高亮效果 */
        .toilet-item.new-toilet {
            background: #fff9c4;
            animation: highlightNew 1s ease infinite;
        }

        @keyframes highlightNew {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
            100% { transform: translateX(0); }
        }

        /* 临时厕所样式 */
        .toilet-item.temporary-toilet {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
        }

        .temporary-badge {
            background: #ff9800;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        /* 临时厕所使用统计样式 */
        .temporary-stats {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ddd;
        }

        .temporary-stats-header {
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
        }

        .temporary-toilet-usage {
            background: #fff3e0;
            padding: 8px;
            border-radius: 4px;
            margin-bottom: 6px;
        }

        .temp-toilet-name {
            font-size: 12px;
            color: #ff9800;
            margin-bottom: 4px;
        }

        .usage-stats {
            display: flex;
            gap: 15px;
            font-size: 12px;
        }

        .usage-stats .male {
            color: #1976d2;
        }

        .usage-stats .female {
            color: #d81b60;
        }

        /* 配置按钮样式 */
        .config-btn {
            background: #2196F3;
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        .config-btn:hover {
            background: #1976D2;
            transform: translateY(-2px);
        }

        /* 配置面板样式 */
        .config-panel {
            position: fixed;
            top: 0;
            right: -400px;
            width: 380px;
            height: 100vh;
            background: white;
            box-shadow: -2px 0 8px rgba(0,0,0,0.1);
            z-index: 1000;
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .config-panel.active {
            right: 0;
        }

        .config-panel-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .config-panel-header h3 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }

        .config-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .config-panel-footer {
            padding: 15px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .reset-config-btn {
            background: #9e9e9e;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 配置面板关闭按钮 */
        .close-config-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .close-config-btn:hover {
            background: #f5f5f5;
            color: #333;
        }

        /* 配置面板底部按钮 */
        .save-config-btn,
        .reset-config-btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .save-config-btn {
            background: #4caf50;
            color: white;
        }

        .save-config-btn:hover {
            background: #45a049;
        }

        .reset-config-btn {
            background: #9e9e9e;
            color: white;
        }

        .reset-config-btn:hover {
            background: #757575;
        }

        /* 跨年模式相关样式 */
        .new-year-affected {
            position: relative;
            background: #fff3e0;
            border: 1px solid #ffe0b2;
            border-radius: 4px;
            padding: 8px;
            transition: all 0.3s ease;
        }

        .new-year-affected::after {
            content: '跨年模式影响';
            position: absolute;
            top: -10px;
            right: 10px;
            background: #ff9800;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .new-year-note {
            font-size: 13px;
            color: #f57c00;
            margin: 5px 0;
            padding: 5px;
            display: none;
        }

        .new-year-note.active {
            display: block;
        }

        /* 配置面板内容布局优化 */
        .config-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .config-section h5 {
            margin: 0 0 8px 0;
            font-size: 14px;
            color: #2196F3;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .config-section h5::before {
            content: '';
            width: 4px;
            height: 14px;
            background: #2196F3;
            border-radius: 2px;
        }

        .config-item {
            display: grid;
            grid-template-columns: 1fr auto auto;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .config-item:last-child {
            margin-bottom: 0;
        }

        .config-item label {
            font-size: 13px;
            color: #666;
            width: auto;
        }

        .config-item input {
            width: 70px;
            height: 28px;
            padding: 0 8px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            text-align: right;
            font-size: 13px;
        }

        .config-item input:focus {
            border-color: #2196F3;
            outline: none;
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
        }

        .config-item .unit {
            font-size: 12px;
            color: #999;
            width: 30px;
        }

        /* 高峰时段布局优化 */
        .peak-hours {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .peak-hour-item {
            background: white;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            display: grid;
            grid-template-columns: 1fr auto auto;
            align-items: center;
            gap: 8px;
        }

        .peak-hour-item label {
            color: #666;
            font-size: 13px;
        }

        .peak-hour-item input {
            width: 70px;
            height: 28px;
            padding: 0 8px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            text-align: right;
            font-size: 13px;
        }

        .peak-hour-item .unit {
            font-size: 12px;
            color: #999;
            width: 30px;
        }

        /* 跨年高峰配置项样式 */
        .midnight-peak {
            background: #fff1f0;
            border-color: #ffccc7;
        }

        .midnight-peak label {
            color: #cf1322;
        }

        .midnight-peak input {
            border-color: #ffccc7;
        }

        .midnight-peak input:focus {
            border-color: #ff4d4f;
            box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
        }

        .midnight-peak .unit {
            color: #ff4d4f;
        }

        /* 跨年模式样式优化 */
        .special-event {
            background: #e3f2fd;
        }

        .new-year-note {
            background: white;
            border-radius: 4px;
            padding: 10px;
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.5;
        }

        .new-year-note i {
            color: #1976d2;
            margin-right: 4px;
        }

        /* 配置面板底部按钮优化 */
        .config-panel-footer {
            padding: 12px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
        }

        .config-panel-footer button {
            height: 32px;
            font-size: 13px;
            min-width: 80px;
        }

        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #ff9800;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* 开关禁用状态 */
        input:disabled + .slider {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 临时厕所标签样式 */
        .temporary-tag {
            position: absolute;
            bottom: 12px;
            right: 15px;
            background: #ff9800;
            color: white;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .temporary-tag i {
            font-size: 10px;
        }

        /* 临时厕所列表项样式 */
        .toilet-item {
            position: relative;  /* 为绝对定位的标签提供参考 */
        }

        /* 悬浮的移除临时厕所按钮 */
        .remove-temporary-btn {
            position: fixed;
            bottom: 80px;  /* 避免与底部标签栏重叠 */
            right: 20px;
            z-index: 100;
            transition: all 0.3s ease;
        }

        .remove-temporary-btn button {
            background: #ff5252;
            color: white;
            border: none;
            border-radius: 24px;
            padding: 12px 24px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .remove-temporary-btn button:hover {
            background: #ff1744;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.25);
        }

        .remove-temporary-btn button:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <!-- 首页内容 -->
    <div id="homePage" class="page-container active">
        <div class="page-header">
            <h1>附近公厕（西湖入口）</h1>
        </div>
        <div id="toiletList" class="toilet-list"></div>
    </div>

    <!-- 我的页面 -->
    <div id="settingsPage" class="page-container">
        <div class="page-header">
            <h1>我的</h1>
        </div>
        
        <!-- 用户信息区域 -->
        <div class="user-profile">
            <div class="avatar">
                <i class="fas fa-user-circle"></i>
            </div>
            <div class="user-info">
                <div class="user-name" id="profileUsername"></div>
                <div class="user-points">
                    <i class="fas fa-coins"></i>
                    积分：<span id="userPoints">0</span>
                </div>
            </div>
        </div>

        <div class="settings-list">
            <div class="settings-item" onclick="showReservations()">
                <span>我的预约</span>
                <i class="fas fa-chevron-right"></i>
            </div>
            <div class="settings-item" onclick="logout()">
                <span>退出登录</span>
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </div>
    
    <!-- 统计页面 -->
    <div id="statsPage" class="page-container">
        <div class="page-header">
            <h1>使用统计</h1>
            <div class="simulate-btn-wrapper">
                <button class="config-btn" onclick="toggleConfigPanel()" title="模拟配置">
                    <i class="fas fa-cog"></i>
                </button>
                <button class="simulate-btn" onclick="startSimulation()" title="开始模拟">
                    <i class="fas fa-play"></i>
                    <span>开始模拟</span>
                </button>
            </div>
        </div>
        <!-- 配置面板 -->
        <div id="configPanel" class="config-panel">
            <div class="config-panel-header">
                <h3>模拟配置</h3>
                <button class="close-config-btn" onclick="toggleConfigPanel()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="config-panel-content">
                <div class="config-section special-event">
                    <h5>特殊活动</h5>
                    <div class="config-item">
                        <label>跨年模式：</label>
                        <label class="switch">
                            <input type="checkbox" id="newYearMode" onchange="updateNewYearConfig(event)">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="new-year-note" id="newYearNote">
                        <i class="fas fa-info-circle"></i>
                        开启跨年模式后，游客流量将增加7.5倍，如厕时间延长2.5倍，
                        并增加22:30-00:30的跨年高峰时段。模拟时间将延长至次日凌晨2:30，
                        以完整覆盖跨年活动时段。受影响的配置项将自动调整。
                    </div>
                </div>
                <div class="config-section">
                    <h5>时间设置（毫秒=分钟）</h5>
                    <div class="config-item" id="dayDurationWrapper">
                        <label>每天时间长度：</label>
                        <input type="number" id="dayDuration" value="1440">
                        <span class="unit">毫秒</span>
                    </div>
                    <div class="config-item" id="maleDurationWrapper">
                        <label>男性如厕时间：</label>
                        <input type="number" id="maleDuration" value="2">
                        <span class="unit">毫秒</span>
                    </div>
                    <div class="config-item" id="femaleDurationWrapper">
                        <label>女性如厕时间：</label>
                        <input type="number" id="femaleDuration" value="6">
                        <span class="unit">毫秒</span>
                    </div>
                    <div class="config-item">
                        <label>最大等待时间：</label>
                        <input type="number" id="waitLimit" value="20">
                        <span class="unit">毫秒</span>
                    </div>
                </div>
                <div class="config-section">
                    <h5>高峰时段</h5>
                    <div class="peak-hours">
                        <div class="peak-hour-item">
                            <label>上午高峰(9-11点)：</label>
                            <input type="number" step="0.1" id="peakRatio1" value="2.5">
                            <span class="unit">倍</span>
                        </div>
                        <div class="peak-hour-item">
                            <label>下午高峰(14-16点)：</label>
                            <input type="number" step="0.1" id="peakRatio2" value="2.0">
                            <span class="unit">倍</span>
                        </div>
                        <div class="peak-hour-item">
                            <label>晚间高峰(19-21点)：</label>
                            <input type="number" step="0.1" id="peakRatio3" value="1.8">
                            <span class="unit">倍</span>
                        </div>
                    </div>
                </div>
                <div class="config-section">
                    <h5>日均游客流量</h5>
                    <div class="config-item" id="weekdayFlowWrapper">
                        <label>工作日：</label>
                        <input type="number" id="weekdayFlow" value="50000">
                        <span class="unit">人</span>
                    </div>
                    <div class="config-item" id="weekendFlowWrapper">
                        <label>周末：</label>
                        <input type="number" id="weekendFlow" value="100000">
                        <span class="unit">人</span>
                    </div>
                    <div class="config-item" id="holidayFlowWrapper">
                        <label>节假日：</label>
                        <input type="number" id="holidayFlow" value="150000">
                        <span class="unit">人</span>
                    </div>
                </div>
                <div class="config-section">
                    <h5>如厕需求比例</h5>
                    <div class="config-item">
                        <label>每人每天：</label>
                        <input type="number" step="0.1" id="usageRatio" value="0.4">
                        <span class="unit">次</span>
                    </div>
                </div>
            </div>
            <div class="config-panel-footer">
                <button class="save-config-btn" onclick="saveConfig()">保存配置</button>
                <button class="reset-config-btn" onclick="resetConfig()">重置默认值</button>
            </div>
        </div>
        <div class="stats-container">
            <!-- 模拟结果显示区域 -->
            <div id="simulationResults" class="simulation-results" style="display: none;">
                <div class="results-header">
                    <h3>模拟结果</h3>
                    <button class="close-btn" onclick="hideSimulationResults()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="results-content">
                    <div class="total-stats">
                        <h4>总体情况</h4>
                        <div class="result-item male">
                            <i class="fas fa-male"></i>
                            <div class="result-details">
                                <div class="label">男性未能如厕</div>
                                <div class="value" id="totalMaleFailRate"></div>
                            </div>
                        </div>
                        <div class="result-item female">
                            <i class="fas fa-female"></i>
                            <div class="result-details">
                                <div class="label">女性未能如厕</div>
                                <div class="value" id="totalFemaleFailRate"></div>
                            </div>
                        </div>
                    </div>
                    <div class="toilet-stats">
                        <h4>各厕所情况</h4>
                        <div id="toiletSimulationStats"></div>
                    </div>
                    <div class="optimization-suggestions">
                        <h4>优化建议</h4>
                        <div id="toiletSuggestions"></div>
                    </div>
                </div>
            </div>
            <div class="stats-content" id="toiletStats"></div>
        </div>
    </div>
    
    <!-- 预约记录页面 -->
    <div id="reservationsPage" class="page-container">
        <div class="page-header">
            <i class="fas fa-arrow-left back-btn" onclick="hideReservations()"></i>
            <h1>我的预约</h1>
        </div>
        <div id="reservationList" class="reservation-list"></div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab('home')">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="tab-item" onclick="switchTab('stats')" id="statsTab" style="display: none;">
            <i class="fas fa-chart-bar"></i>
            <span>统计</span>
        </div>
        <div class="tab-item" onclick="switchTab('settings')">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>

    <!-- 添加 Toast 容器 -->
    <div id="toast" class="toast"></div>

    <!-- 悬浮的移除临时厕所按钮 -->
    <div id="removeTemporaryBtn" class="remove-temporary-btn" style="display: none;">
        <button onclick="removeAllTemporaryToilets()">
            <i class="fas fa-trash-alt"></i>
            移除所有临时厕所
        </button>
    </div>

    <script>
        // 页面加载时检查用户角色并控制统计Tab的显示
        document.addEventListener('DOMContentLoaded', () => {
            const isAdmin = localStorage.getItem('isAdmin') === 'true';
            const statsTab = document.getElementById('statsTab');
            if (statsTab) {
                statsTab.style.display = isAdmin ? 'flex' : 'none';
            }
            
            // 如果当前在统计页面但不是管理员，则切换到首页
            const currentTab = localStorage.getItem('currentTab');
            if (currentTab === 'stats' && !isAdmin) {
                switchTab('home');
            }
            
            // 检查是否是从登录页面跳转来的
            const referrer = document.referrer;
            if (referrer.includes('login.html')) {
                switchTab('home');
                localStorage.removeItem('currentTab');
            } else {
                const lastTab = localStorage.getItem('currentTab');
                if (lastTab) {
                    console.log(lastTab);
                    switchTab(lastTab);
                }
            }
        });

        // 切换tab
        function switchTab(tab) {
            // 如果不是管理员，禁止访问统计页面
            if (tab === 'stats' && localStorage.getItem('isAdmin') !== 'true') {
                return;
            }
            console.log(tab)
            // 获取页面元素
            const homePage = document.getElementById('homePage');
            const settingsPage = document.getElementById('settingsPage');
            const statsPage = document.getElementById('statsPage');
            const tabs = document.querySelectorAll('.tab-item');
            
            // 获取保存的模拟结果状态
            const wasSimulationVisible = localStorage.getItem('simulationResultsVisible') === 'true';
            
            // 切换页面显示
            if (tab === 'home') {
                homePage.classList.add('active');
                settingsPage.classList.remove('active');
                statsPage.classList.remove('active');
                tabs[0].classList.add('active');
                tabs[1].classList.remove('active');
                tabs[2].classList.remove('active');
                document.title = '附近公厕';
            } else if (tab === 'stats') {
                homePage.classList.remove('active');
                settingsPage.classList.remove('active');
                statsPage.classList.add('active');
                tabs[0].classList.remove('active');
                tabs[1].classList.add('active');
                tabs[2].classList.remove('active');
                document.title = '使用统计';
                updateToiletStats(); // 切换到统计页面时更新数据
                // 恢复模拟结果显示状态
                if (wasSimulationVisible) {
                    document.getElementById('simulationResults').style.display = 'block';
                }
            } else if (tab === 'settings') {
                homePage.classList.remove('active');
                settingsPage.classList.add('active');
                statsPage.classList.remove('active');
                tabs[0].classList.remove('active');
                tabs[1].classList.remove('active');
                tabs[2].classList.add('active');
                document.title = '我的';
            }

            // 保存当前tab状态
            localStorage.setItem('currentTab', tab);
        }

        // 退出登录
        function logout() {
            // 保存统计数据
            const unlockStats = localStorage.getItem('unlockStats');
            
            // 清除登录状态
            localStorage.removeItem('isLoggedIn');
            localStorage.removeItem('isAdmin');
            localStorage.removeItem('currentTab');
            localStorage.removeItem('currentToilet');
            localStorage.removeItem('toiletsData');
            
            // 恢复统计数据
            if (unlockStats) {
                localStorage.setItem('unlockStats', unlockStats);
            }
            
            showToast('已退出登录', 'success');
            setTimeout(() => {
                window.location.href = 'login.html';
            }, 1000);
        }

        // 切换筛选按钮
        function switchFilter(btn, filter) {
            // 更新按钮状态
            document.querySelectorAll('.filter-btn').forEach(b => {
                b.classList.remove('active');
            });
            btn.classList.add('active');
            
            // 更新统计数据
            updateToiletStats(filter);
        }

        // 更新厕所统计数据
        function updateToiletStats(filter = 'today') {
            const toiletStats = getStatsForRange(filter);
            console.log('Toilet stats:', toiletStats);
            
            // 渲染统计数据
            const statsContent = document.getElementById('toiletStats');
            if (Object.keys(toiletStats).length === 0) {
                statsContent.innerHTML = '<div class="no-data">暂无统计数据</div>';
                return;
            }
            
            statsContent.innerHTML = Object.entries(toiletStats)
                .map(([toiletName, data]) => `
                    <div class="toilet-stats-card">
                        <div class="toilet-stats-header">
                            <span class="toilet-stats-name">${toiletName}</span>
                            <span class="toilet-stats-total">总使用：${data.totalCount}次</span>
                        </div>
                        <!-- 异常状态统计 -->
                        ${data.abnormal.total > 0 ? `
                            <div class="abnormal-stats">
                                <div class="abnormal-header">异常状态统计</div>
                                <div class="abnormal-items">
                                    ${data.abnormal.fault > 0 ? `
                                        <div class="abnormal-item fault">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            <span>故障：${data.abnormal.fault}</span>
                                        </div>
                                    ` : ''}
                                    ${data.abnormal.maintenance > 0 ? `
                                        <div class="abnormal-item maintenance">
                                            <i class="fas fa-tools"></i>
                                            <span>维修：${data.abnormal.maintenance}</span>
                                        </div>
                                    ` : ''}
                                    ${data.abnormal.smoke > 0 ? `
                                        <div class="abnormal-item smoke">
                                            <i class="fas fa-smoking"></i>
                                            <span>烟雾：${data.abnormal.smoke}</span>
                                        </div>
                                    ` : ''}
                                </div>
                            </div>
                        ` : ''}
                        <div class="gender-stats">
                            <div class="gender-stats-item male">
                                <i class="fas fa-male"></i>
                                <span>男厕：${data.male}次</span>
                            </div>
                            <div class="gender-stats-item female">
                                <i class="fas fa-female"></i>
                                <span>女厕：${data.female}次</span>
                            </div>
                        </div>
                        <div class="stall-stats-list">
                            ${Object.entries(data.stalls)
                                .sort(([a], [b]) => a - b)
                                .map(([stallId, stallData]) => `
                                    <div class="stall-stats-item">
                                        <span>${stallId}号（${stallData.gender}）</span>
                                        <span>${stallData.count}次</span>
                                    </div>
                                `).join('')}
                        </div>
                    </div>
                `).join('') || '<div class="no-data">暂无统计数据</div>';
        }

        // 在关闭模拟结果时也要更新状态
        function hideSimulationResults() {
            document.getElementById('simulationResults').style.display = 'none';
            localStorage.removeItem('simulationResultsVisible');
        }
    </script>

    <script src="js/home.js"></script>
</body>
</html> 